import React, { Component } from 'react';
import {
	observer,
} from 'mobx-react';
import { TabPage, ListViewPage, SearchAdvanced } from 'weaver-mobile-page';
import { SearchBar, Icon, Flex ,SwipeAction, Tools} from 'weaver-mobile';
import {
	withRouter,
} from 'react-router-dom';
import { configNavigation } from "../../util/public-func";
const getLabel = Tools.getLabel;

const tabs = [{
	key: "0",
	title: getLabel(16349, '待处理')
}, {
	key: "1",
	title: getLabel(1454, '已处理')
}];

@withRouter
@observer
export default class Suggest extends Component {
	componentDidMount() {
		configNavigation(getLabel(126253, "公共组调整建议"));
		this.props.store.initSuggest();
	}

	componentWillUnmount() {
		configNavigation(getLabel('518809', '常用组管理'));
	}

	getTemplate = (template) => {
		const {
			store
		} = this.props, {
			confirmAdd,
			confirmDel,
			markAsRead,
			suggestTabKey,
		} = store;

		const style = {
			color:"#fff",
			padding:"0 5px",
		};
		
		const newTemp = {
			default: [{
				key: 'col0',
				render:(data) => {
		      	const {suggesttitlespan,createrspan,namespan,contentspan,suggesttype,suggesttypespan,createdate} = data;

				const right = [{
					text: getLabel('518813','确认添加') ,
					onPress: (e) => {
						e.stopPropagation();
						confirmAdd(data)
					},
					style: {
						...style,
						backgroundColor: "#4d7ad8"
					}
				}, {
					text: getLabel('518814','标记为已处理') ,
					onPress: (e) => {
						e.stopPropagation();
						markAsRead(data)
					},
					style: {
						...style,
						backgroundColor: "#f59a23"
					}
				}];

		      	if (suggesttype === "2") {
		      		right.splice(0,1,{
		      			text: getLabel('518815','确认删除') ,
						onPress: (e) => {
							e.stopPropagation();
							confirmDel(data)
						},
						style: {
							...style,
							backgroundColor: "#d9001b"
						}
		      		})
		      	}
		      	return (
		      		<SwipeAction
				      right={(suggestTabKey === "0") && right }
				    >
			      		<Flex direction="column" align="start">
			      			<Flex.Item>
			      				<span className="list-main">
			      					{`${suggesttitlespan}-${suggesttypespan}`}
			      				</span>
			      			</Flex.Item>
			      			<Flex.Item>
			      				<span className="list-sub">
					      			{namespan}
			      				</span>
			      			</Flex.Item>
			      			<Flex.Item>
			      				<span className="list-sub">{createrspan}</span>
			      				<span className="list-sub" style={{marginLeft: 10}}>{createdate}</span>
			      			</Flex.Item>
			      		</Flex>
		      		</SwipeAction>
		      	)
		      }
			}, ],
		};
    return newTemp;
  }

	render() {
		const {
			store
		} = this.props, {
			suggestTabKey,
			changeSuggestTabKey,
			suggestListStore,
			suggestSearchStore,
			openSuggestSearchLayout,
			getSuggestList,
			openSuggestDetailLayout,
		} = store, {
			form
		} = suggestSearchStore;

		const tabProps = {
			onTabClick: (tab) => {
				changeSuggestTabKey(tab.key);
			},
			page: suggestTabKey
		};

		return (
			<div className="group-suggest">
				<TabPage
			        className="tab-page-example"
			        tabs={tabs}
			        tabProps={tabProps}
			    />
			    <SearchBar
			        className="search-select"
			        placeholder={getLabel(500351, "请输入关键字")}
			        showExtraButton
			        extraButton={[
			          { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> },
			        ]}
			        value={form.formParams.suggesttitle}
			        onChange={v =>form.updateField("suggesttitle",v) }
			        onExtraButtonClick={openSuggestSearchLayout}
			      />
			    <ListViewPage.Normal
			        className="wm-demo-list-view-page"
			        store={suggestListStore}
			        getTemplate={this.getTemplate}
			        onRowClick={data => (suggestTabKey === "0") && openSuggestDetailLayout(data)}
			      />
			     <SearchAdvanced
		          store={suggestSearchStore}
		          onSubmit={getSuggestList}
		        />
			</div>
		);
	}
}